<template>
  <div>
    <h2>当前求和为{{ sum }}</h2>
    <button @click="addSum">点我sum+1</button>
  </div>
</template>

<script lang="ts" setup>
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref,
} from "vue";
//数据
let sum = ref(0);
//方法
function addSum() {
  sum.value++;
}
//创建
console.log("创建");
//挂载
onBeforeMount(() => {
  console.log("挂载前");
});
//挂载完毕
onMounted(() => {
  console.log("子挂载完毕");
});
//更新前
onBeforeUpdate(() => {
  console.log("更新前");
});
//更新完毕
onUpdated(() => {
  console.log("更新完毕");
});
//卸载前
onBeforeUnmount(() => {
  console.log("卸载前");
});
//卸载完毕
onUnmounted(() => {
  console.log("卸载完毕");
});
</script>
